@extends('develop.layoutEdit')

@section('css')
    <style>
        .layer-go-back{
            display:none;
        }
    </style>
@endsection

@section('title')
    <li class="cur">
        <span>会员绑卡设置</span>
    </li>
@endsection

@section('content')

    <div class="alert alert-success" role="alert" style="margin-top:10px;width: 70%;margin-left: 15px;">
        选中一行并拖动鼠标，进行排列 <strong>字段名称</strong> 组合顺序
    </div>

    <input type="hidden" name="function_id" id="function_id" value="{{ $function_id or ''}}">

    <div class="comm_content" style="margin-left: 15px;margin-top:20px;width: 70%;">
        <div class="panel panel-default">
            <div class="panel-heading">会员绑卡设置列表</div>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align:center;">字段名称</th>
                    <th style="text-align:center;">是否显示</th>
                    <th style="text-align:center;">是否必填</th>
                    <th style="text-align:center;">其他</th>
                </tr>
                </thead>
                <tbody id="sortable_tr"></tbody>
            </table>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-3 control-label"></label>
        <div class="col-sm-9">
            <input type="button"  value="保存" onclick="func.edit();" class="btn btn-success" >
        </div>
    </div>

@endsection

@section('js')
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>
        $(function(){
            var configure_array = 0 ;
            if ( !E.isEmpty({!! $configure_json or 0 !!}) ) {
                configure_array = eval( '(' + '{!! $configure_json or 0 !!}'  + ')' );
            }

            //列参数
            var column_data = {
                'mobile' : '手机号' ,
                'cardNo' : '会员卡号' ,
                'pwd' :'卡密码',
                'identityCard' : '身份证' ,
                'referee' : '推荐人'
            } ;

            var html = '' ;

            //已存在配置
            if( !E.isEmpty( configure_array.configure ) ) {

                $.each( configure_array.configure , function( k ,v ) {

                    if( typeof( column_data[k] ) ==  'undefined' || E.isEmpty( column_data[k] ) ) {
                        return true ;
                    }

                    html +='<tr  class="column layui-form" name="'+ k +'">';
                    html +='<td style="text-align:center;">'+ column_data[k] +'</td>';

                    if( k == 'mobile' &&  v.is_proving == 1  ) {
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_show" checked disabled lay-skin="primary"></td>';
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_must" checked disabled lay-skin="primary"></td>';
                        html += '<td><input type="checkbox" class="is_proving" checked lay-skin="primary">  是否开启短信验证</td>';

                        //删除json内的元素
                        delete column_data[k] ;
                        return true ;
                    }

                    if( v.is_must == 1 ) {
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_show" checked disabled lay-skin="primary"></td>';
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_must" checked lay-skin="primary"></td>';
                    } else if( v.is_show == 1 ) {
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_show" checked lay-skin="primary"></td>';
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_must" lay-skin="primary"></td>';
                    } else {
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_show" lay-skin="primary"></td>';
                        html +='<td style="text-align:center;" ><input type="checkbox" class="is_must" lay-skin="primary"></td>';
                    }

                    if( k == 'mobile' ) {
                        html += '<td><input type="checkbox" class="is_proving" lay-skin="primary">  是否开启短信验证</td>';
                    } else {
                        html += '<td></td>';
                    }

                    html +='</tr>';

                    //删除json内的元素
                    delete column_data[k] ;

                }) ;
            }

            //判断json中是否存在其他元素
            if( !$.isEmptyObject( column_data ) ) {

                $.each(column_data, function (k, v) {

                    html += '<tr  class="column layui-form" name="' + k + '">';
                    html += '<td style="text-align:center;">' + v + '</td>';
                    html += '<td style="text-align:center;" ><input type="checkbox" class="is_show" lay-skin="primary"></td>';
                    html += '<td style="text-align:center;" ><input type="checkbox" class="is_must" lay-skin="primary"></td>';

                    if( k == 'mobile') {
                        html += '<td><input type="checkbox" class="is_proving" lay-skin="primary"> 是否开启短信验证</td>';
                    } else {
                        html += '<td></td>';
                    }

                    html += '</tr>';

                })
            }

            //向表格中插入行
            $('#sortable_tr').append( html ) ;

            //行拖动事件
            $("#sortable_tr").sortable({
                cursor: "move"
            });

            layui.use(['form'], function(){

                var form = layui.form();

                form.on('checkbox', function(data){

                    var obj = data.elem;

                    var is_checked = data.elem.checked;

                    if ( is_checked ) {

                        if ( $(obj).hasClass('is_must')) {
                            $(obj).parents('tr').find('.is_show').attr('disabled',true);
                            $(obj).parents('tr').find('.is_show')[0].checked = data.elem.checked;
                        }

                        if ( $(obj).hasClass('is_proving') ) {

                            $(obj).parents('tr').find('.is_must').attr('disabled',true);
                            $(obj).parents('tr').find('.is_show').attr('disabled',true);
                            $(obj).parents('.layui-form').find('input').each(function(index, item){
                                item.checked = data.elem.checked;
                            });

                            form.render('checkbox');
                            return false;
                        }

                        if ( $(obj).hasClass('is_show') ) {
                            $(this).attr('checked',true);
                        }

                    } else {

                        if ( $(obj).hasClass('is_must')) {
                            $(obj).parents('tr').find('.is_show').removeAttr('disabled');
                            $(obj).parents('tr').find('.is_must').removeAttr('checked');
                        }

                        if ( $(obj).hasClass('is_proving') ) {
                            $(this).parents('tr').find('.is_must').removeAttr('disabled');
                        }

                        if ( $(obj).hasClass('is_show') ) {
                            $(this).removeAttr('checked');
                        }

                    }

                    form.render('checkbox');

                });
            });

        });


        var func = {

            function_id : {{ $function_id or ''}},

            //保存
            edit:function(){

                var configure = { };
                configure.function_id = $('#function_id').val() ;

                //循环保存
                $('.column').each( function () {

                    var is_must = $(this).find('.is_must').is(':checked') ? 1 : 0 ;
                    var is_show = is_must ? 1 : $(this).find('.is_show').is(':checked') ? 1 : 0 ;

                    if( $(this).find('.is_proving').is(':checked') )  {
                        configure[$(this).attr('name')] = { is_must: is_must , is_show : is_show ,is_proving : 1} ;
                    } else {
                        configure[$(this).attr('name')] = { is_must: is_must , is_show : is_show } ;
                    }

                }) ;

                var index  = layer.load() ;
                E.ajax( {
                    type:'get',
                    url: '/lar/develop/function/store/'+func.function_id,
                    data: configure,
                    dataType:'json',

                    // 返回值判断
                    success: function ( obj ){

                        layer.close( index) ;

                        if ( obj.code == 200 ) {
                            layer.alert( obj.message , { icon: 1,time : 1500 } ) ;
                        } else {
                            layer.alert( obj.message , { icon: 2 } ) ;
                        }
                    }
                } ) ;

            }

        } ;
    </script>

@endsection